import React,{Component} from 'react';
import './reg.css';

import HdbNav from "../../components/hdb-nav/";
import HdbInput from "../../components/hdb-input";
import HdbButton from "../../components/hdb-button";
import {queryReg} from "../../services/user";

export default class Reg extends Component{

    state = {
        username:'',
        password:'',
        errorMess:'',//登录失败时的信息
    };

    //通过onChange事件 修改 model值， 反向数据流
    changeIpt = (ev) => {
        this.setState({
            [ev.target.name]:ev.target.value
        })
    };

    //登录 数据交互 同步local

    reg = async () => {

        let {username,password}=this.state;
        let icon = this.file;
        let res = await queryReg({username,password,icon});//调用注册服务

        if (res.data.err===0){
            this.props.history.push('/login')
        } else {
            this.setState({errorMess:res.data.msg})
        }

    };

    render(){
        let {username,password,errorMess} = this.state;
        return (
            <div className="content">
                <HdbNav arrow="gray" bgColor="transparent" borderWidth={0} />
                <h1 onClick={()=>this.file.click()}></h1>
                <input type="file" ref={el=>this.file=el} style={{visibility:'hidden'}}/>
                <div className="login-box">
                    <p className="lsolid"></p>
                    <div className="login">
                        <a >登录</a>
                        <span></span>
                        <a>注册</a>
                    </div>
                    <p className="rsolid"></p>
                </div>
                <ul>
                    <HdbInput
                        label={"用户"}
                        model={{name:'username',value:username,onChange:this.changeIpt}}
                    />
                    <HdbInput
                        label={"密码"}
                        type={"password"}
                        model={{name:'password',value:password,onChange:this.changeIpt}}
                    />
                    <span style={{color:'red'}}>{errorMess}</span>
                </ul>
                <div className="footbox">
                    <HdbButton
                        style={{marginTop:'.64rem'}}
                        onClick={this.reg}
                        size="large"
                    >注册册</HdbButton>
                    <a  className="tishi">忘记密码？</a>
                </div>
            </div>
        )
    }
}